<template>
  <div class="MainBody">
    <el-container>
  <el-header class="classheader">
    <span >课程管理</span>
</el-header>
  <el-main>
    <el-row class="card-container">
  <el-col
    :span="8"
    v-for="(item, index) in list"
    :key="index"
    class="card-wrapper"
  >
    <div @click="toMainPage(index)" class="card-content">
      <el-card>
        <img src="../../static/PCLoginPicture.png" class="image">
        <div style="padding: 14px;">
          <span>{{ item.coursename }}</span>
        </div>
      </el-card>
    </div>
  </el-col>
</el-row>

  </el-main>
</el-container>

  </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      currentDate: new Date(),
      list:[],
    };
  },
  methods: {
    toMainPage(title) {
  // 在新标签页中打开当前页面的URL
  let newTab = window.open(('/#/PCCourse/' + this.list[title].coursename+'/'+this.list[title].id), '_blank');

  // 在新标签页中利用路由导航守卫重定向到目标路由
  // newTab.onload = function() {
  //   newTab.location.href = '/#/PCMain/' + this.list[title].classname+'/'+this.list[title].id;
  // };
    } 
  },
  mounted() {
      this.loading = false;
      axios.post("/course/AllCourse").then(response => {
    console.log(response);
    this.list = response.data.data;
    console.log(this.list);
      });
    },
}
</script>

<style scoped>
   /* template{
    margin: 0;
    padding: 0;
   } */
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .classheader {
    background-color: #424242;
  }
  .classheader span {
    /* height: 60px;
    width: 300px;
    background-color: #f42525; */
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
  }
  .card-container {
  display: flex;
  flex-wrap: wrap;
}
.card-wrapper {
  flex: 0 0 calc(33.333% - 20px); /* 设置每个卡片的宽度为1/3，并添加间距 */
  margin: 10px;
}
.card-content {
  height: 100%; /* 保证卡片的高度撑开容器 */
  display: flex;
  flex-direction: column;
}

</style>

